<template>
  <div v-loading="loading" class="app-container">
    <div class="head-container">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title"> <i class="el-icon-search" />搜索栏 </template>
          <el-form :model="params" class="searchform" :inline="true" size="mini" label-width="auto">
            <el-form-item label="UPC">
              <el-input v-model="params.upcNbr" placeholder="输入搜索" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" style="float: right; margin-right: 0px" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" type="primary" style="float: right; margin-right: 0px" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div style="padding-top: 5px">
      <el-button
        v-if="hasRole(['R017001', 'R017006'])"
        size="mini"
        type="danger"
        style="float: right; margin-bottom: 5px; margin-left: 0px"
        icon="el-icon-delete"
        round
        @click="doDelete"
      >
        作废
      </el-button>
      <el-button
        v-if="hasRole(['R017001', 'R017006'])"
        size="mini"
        type="primary"
        style="float: right; margin-left: 0px"
        icon="el-icon-download"
        round
        @click="doDownloadTemplate"
      >
        下载模板
      </el-button>
      <el-button size="mini" type="primary" style="float: right; margin-bottom: 5px; margin-left: 0px" icon="el-icon-download" round @click="doExportExcel">
        导出Excel
      </el-button>
      <el-upload
        v-if="hasRole(['R017001', 'R017006'])"
        ref="upload"
        :auto-upload="false"
        :on-change="handleOnChange"
        :show-file-list="false"
        :limit="1"
        :multiple="false"
        action="#"
        accept=""
        style="float: right; margin-bottom: 5px; margin-left: 0px"
      >
        <el-button size="mini" type="primary" icon="el-icon-upload2" round>导入Excel</el-button>
      </el-upload>
      <el-button size="mini" type="primary" style="float: right; margin-left: 0px" icon="el-icon-edit" round @click="doClearSelection">取消选择</el-button>
      <el-table
        ref="dataTab"
        :data="data"
        :row-key="getRowKeys"
        stripe
        size="small"
        border
        style="width: 100%"
        @header-dragend="colChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" :width="colWidths.deptNbr" />
        <el-table-column :show-overflow-tooltip="true" label="UPC" prop="upcNbr" :width="colWidths.upcNbr" />
        <el-table-column :show-overflow-tooltip="true" label="商品说明" prop="item1Desc" :width="colWidths.item1Desc" />
        <el-table-column :show-overflow-tooltip="true" label="含税单位成本价/元" prop="custCostAmt" :width="colWidths.item1Desc" />
        <el-table-column :show-overflow-tooltip="true" label="含税零售价/元" prop="custRtlAmt" :width="colWidths.createdBy" />
        <el-table-column :show-overflow-tooltip="true" label="创建人" prop="createdBy" :width="colWidths.createdBy" />
        <el-table-column :show-overflow-tooltip="true" label="创建时间" prop="createdTime" :width="colWidths.createdTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100, 500]"
        style="margin-top: 8px"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import initData from '@/utils/initData'
import { parseTime } from '@/utils/index'
import { Message } from 'element-ui'
import { importNewItemListData, batchDeleteNewItemListData, nicAudit } from '@/api/new-item'
import { doDownload } from '@/api/download'
import { authentication } from '@/utils/processingData.js'

export default {
  mixins: [initData],
  data() {
    return {
      loading: false,
      activeName: '1',
      ids: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = '/new-item/queryNewItemData'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
      this.doClearSelection()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = {}
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach((item) => {
        this.ids.push(item.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 清空选择项
    doClearSelection() {
      this.$refs.dataTab.clearSelection()
    },
    // 文件变动的钩子
    handleOnChange(file, fileList) {
      const ex = file.raw.name.substring(file.raw.name.lastIndexOf('.') + 1)
      if (ex !== 'xlsx') {
        Message({
          message: '请上传格式为 xlsx 的Excel文件。',
          type: 'error',
          duration: 3 * 1000
        })
        fileList.pop()
      } else {
        this.loading = true
        var formData = new FormData()
        formData.append('file', file.raw)
        importNewItemListData(formData).then(
          (res) => {
            nicAudit().then((_) => {
              this.toQuery()
              console.log('********************res', res)
              Message({
                // message: '操作成功，上传数据行数：' + res,
                message: `页面提示“操作成功，上传${res.insertCount}条,更新${res.updateCount}条`,
                type: 'success',
                duration: 3 * 1000
              })
              this.loading = false
            })
          },
          (error) => {
            console.log(error)
            this.loading = false
          }
        )
        fileList.pop()
      }
    },
    // 作废数据
    doDelete() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要作废的数据。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$confirm('确认作废选择的 ' + this.ids.length + ' 条数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          batchDeleteNewItemListData(this.ids).then(
            () => {
              this.toQuery()
              Message({
                message: '操作成功。',
                type: 'success',
                duration: 3 * 1000
              })
              this.loading = false
            },
            (error) => {
              console.log(error)
              this.loading = false
            }
          )
        })
      }
    },
    // 批量导出
    doExportExcel() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要导出的数据。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$confirm('确认导出选择的 ' + this.ids.length + ' 条数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          doDownload('/new-item/exportNewItemList', { ids: this.ids }, 'new_item_list.xlsx').then(
            () => {
              this.loading = false
            },
            (error) => {
              console.log(error)
              this.loading = false
            }
          )
        })
      }
    },
    // 模板下载
    doDownloadTemplate() {
      var uri = process.env.VUE_APP_BASE_API + '/new-item/downloadNewItemListTemplate'
      window.open(authentication(uri))
    }
  }
}
</script>
